<template>
	<view class="zuliinfo">
		<headertop title="租赁信息" :back1="back1" str1="oridei"></headertop>
		<view class="zuliinfoback">

		</view>
		<view :style="{'margin-top':statusBarHeight+'px','width':'100%','height':barHeight+'px'}">
		</view>
		<view class="centerbox">
			<view class="spinfobox">
				<image :src="zuliObj['image']" class="lefimg" mode=""></image>
				<view class="texts">
					<view class="t1">
						{{zuliObj['title']}}
					</view>
					<view class="t2">
						{{zuliObj['subtitle']}}
					</view>
					<view class="t3">
						<view class="jiage">
							￥{{zuliObj['price'][0]}}
						</view>
						<view class="yajin">
							押金：{{zuliObj['deposit']}}
						</view>
					</view>
				</view>
			</view>
			<view class="lianxirenbox">
				<view class="center">
					<view class="labletitle">
						<image :src="_static('/images/Group 11682@2x.png')" class="xbq" mode=""></image>
						<span>联系人信息</span>
					</view>
					<view class="line">
						<view class="lefttext">
							<span style="color:#F53F3F;">*</span>
							<span>联系人：</span>
						</view>
						<input type="text" v-model="queryobj['user_name']" placeholder="请输入联系人姓名（必填）" />
					</view>
					<view class="line">
						<view class="lefttext">
							<span style="color:#F53F3F;">*</span>
							<span>联系方式：</span>
						</view>
						<input type="text" v-model="queryobj['tel']" placeholder="请输入手机号码（必填）" />
					</view>
					<!-- <view class="line" style="border: none;">
						<view class="lefttext">
							<span style="color:#F53F3F;">*</span>
							<span>备注：</span>
						</view>
						<input type="text" v-model="queryobj['remark']" placeholder="请输入备注" />
					</view> -->
				</view>
			</view>
			<view class="gouxuanxiey">
				<image @click="flag=!flag"
					:src="flag?_static('/images/Group 11730@2x.png'):_static('/images/Ellipse 31@2x.png')"
					class="xkicon" mode=""></image>
				<span>勾选阅读并同意<span style="color:#2AB4F5;" @click="gopage()">《{{title}}》</span></span>
			</view>
			<view class="lianxirenbox">
				<view class="center">
					<view class="labletitle">
						<image :src="_static('/images/Group 11682@2x.png')" class="xbq" mode=""></image>
						<span>租赁须知</span>
					</view>
					<view class="texts">
						<up-parse :content="zuliObj['rent_notice']"></up-parse>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 200rpx;">

		</view>
		<view class="fixedbox">
			<view class="btn" @click="querenzuli">
				确认租赁
			</view>
		</view>
	</view>
</template>

<script setup>
	import headertop from '@/components/header.vue'
	import {
		_static
	} from '@/ulm/utils/url.js'

	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	import ulm, {
		$api
	} from '@/ulm';
	const statusBarHeight = ref('')
	import {
		onPageScroll,
		onLoad,
		onShow,
		onReachBottom
	} from "@dcloudio/uni-app";
	const queryobj = reactive({
		user_name: '',
		tel: '',
	})
	const payoid1 = ref('')
	const title = ref('')
	const barHeight = ref('')
	const back1 = ref('')
	const flag = ref(false)
	const zuliObj = ref({})
	const list6 = ref([
		'https://zhengzhou5.zos.ctyun.cn/manxingbing/xcx/images/image@2x(2).png',
		'https://zhengzhou5.zos.ctyun.cn/manxingbing/xcx/images/image@2x(2).png',
		'https://zhengzhou5.zos.ctyun.cn/manxingbing/xcx/images/image@2x(2).png'
	]);
	onMounted(() => {
		statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight
		const {
			top,
			height
		} = wx.getMenuButtonBoundingClientRect();
		barHeight.value = height ? height + (top - statusBarHeight.value) * 2 : 38;
	})
	onPageScroll((e) => {
		if (e.scrollTop > 100) {
			back1.value = '#81D6FF'
		} else {
			back1.value = ''
		}
	})
	onShow(() => {
		xieyiinit()
	})
	onLoad((opt) => {
		init(opt.id)
	})
	async function xieyiinit() {
		const res = await $api.getRichtext({
			id: 3
		})
		if (res.code == 1) {
			title.value = res.data.title
		}
	}

	async function querenzuli() {
		if (!flag.value) {
			uni.showToast({
				icon: 'none',
				title: '请勾选协议'
			})
			return
		}
		for (var i in queryobj) {
			if (!queryobj[i]) {
				uni.showToast({
					icon: 'none',
					title: '请补全租赁信息'
				})
				return
			}
		}
		const phoneRegex = /^1[3-9]\d{9}$/;
		if (!phoneRegex.test(queryobj['tel'])) {
			uni.showToast({
				title: '请输入正确联系方式',
				icon: 'none'
			})
			return
		}

		uni.navigateTo({
			url: '/sub_shoppingmal/index/querendingdan1?obj=' +JSON.stringify(queryobj) + '&id=' + zuliObj.value.id
		})
		// const res = await $api.createorder1(queryobj)
		// if (res.code == 1) {
		// 		var payoid = res.data.id
		// 		payoid1.value = payoid
		// 		const res1 = await $api.payPrepay({
		// 			order_sn: res.data.order_sn,
		// 			payment: 'wechat'
		// 		})
		// 		if (res1.code == 1) {
		// 			var payobj = res1.data.pay_data
		// 			uni.requestPayment({
		// 				timeStamp: String(payobj.timeStamp),
		// 				nonceStr: payobj.nonceStr,
		// 				package: payobj.package,
		// 				signType: payobj.signType,
		// 				paySign: payobj.paySign,
		// 				success(res) {
		// 					show.value = true
		// 				},
		// 				fail(e) {
		// 					setTimeout(() => {
		// 						uni.showToast({
		// 							title: '支付失败',
		// 							icon: 'none'
		// 						})
		// 					}, 500)
		// 					uni.redirectTo({
		// 						url: '/sub_shoppingmal/index/orderdetail?id=' + payoid
		// 					})
		// 				}
		// 			})

		// 		}
		// }
	}

	function gopage() {
		uni.navigateTo({
			url: '/sub_index/index/xieyipage?id=3'
		})
	}
	async function init(id) {
		const res = await $api.rentdetail({
			id
		})
		if (res.code == 1) {
			zuliObj.value = res.data
			queryobj['goods_id'] = res.data.sku_prices[0]['goods_id']
		}
	}
</script>
<style lang="scss">
	page {
		background: #F7F8FA;
	}

	.fixedbox {
		width: 100%;
		height: 184rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -4rpx 4rpx 0rpx rgba(0, 0, 0, 0.05);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		position: fixed;
		bottom: 0%;

		.btn {
			width: 686rpx;
			height: 88rpx;
			background: #2AB4F5;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			text-align: center;
			line-height: 88rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #FFFFFF;
			margin: auto;
			margin-top: 22rpx;
		}
	}

	.zuliinfo {
		width: 100%;
		overflow: hidden;
		position: relative;

		.zuliinfoback {
			height: 530rpx;
			background: linear-gradient(180deg, #CAEEFF 71%, rgba(240, 250, 255, 0) 100%);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			width: 100%;
			position: absolute;
			z-index: -1;
		}

		.centerbox {
			width: 686rpx;
			margin: auto;
			margin-top: 28rpx;
			overflow: hidden;

			.gouxuanxiey {
				width: 100%;
				display: flex;
				align-items: center;
				margin-top: 30rpx;
				margin-bottom: 34rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #4E5969;

				.xkicon {
					width: 32rpx;
					height: 32rpx;
					margin-right: 14rpx;
				}
			}

			.lianxirenbox {
				width: 100%;
				overflow: hidden;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 14rpx 0rpx rgba(0, 0, 0, 0.09);
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				margin-top: 32rpx;

				.center {
					width: 630rpx;
					margin: auto;

					.line {
						width: 100%;
						height: 84rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						border-bottom: 2rpx solid #F7F8FA;

						.lefttext {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #1D2129;
						}

						input {
							font-size: 28rpx;
							text-align: right;
						}
					}

					.texts {
						width: 100%;
						margin-top: 28rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #4E5969;
						margin-bottom: 28rpx;
					}

					.labletitle {
						display: flex;
						align-items: center;
						margin-top: 28rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 32rpx;
						color: #1D2129;

						.xbq {
							width: 34rpx;
							height: 20rpx;
							margin-right: 14rpx;
						}
					}
				}
			}

			.spinfobox {
				width: 100%;
				height: 224rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 4rpx 0rpx rgba(142, 215, 249, 0.27);
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				display: flex;
				align-items: center;
				overflow: hidden;

				.lefimg {
					width: 176rpx;
					height: 176rpx;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					margin-left: 24rpx;
				}

				.texts {
					width: 440rpx;
					overflow: hidden;
					margin-left: 28rpx;

					.t3 {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 32rpx;

						.jiage {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 32rpx;
							color: #F53F3F;
						}

						.yajin {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #86909C;
						}
					}

					.t1 {
						width: 100%;
						overflow: hidden;
						/* 隐藏溢出内容 */
						white-space: nowrap;
						/* 强制文本不换行 */
						text-overflow: ellipsis;
						/* 超出部分显示省略号 */
						font-weight: 500;
						font-size: 32rpx;
						color: #1D2129;
					}

					.t2 {
						margin-top: 28rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #868686;
						width: 100%;
						overflow: hidden;
						/* 隐藏溢出内容 */
						white-space: nowrap;
						/* 强制文本不换行 */
						text-overflow: ellipsis;
						/* 超出部分显示省略号 */
					}
				}
			}
		}
	}
</style>